/* components */
import { BaseSelectUserOperateBar } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum, BaseSelectUserTab } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useBaseSelectUserTabs } from '@src/component/common/BaseSelectUser/hooks'
/* scss */
import '@src/component/common/BaseSelectUser/components/SelectPanel/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, ComputedRef, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

export type SelectPanelProps = {
  isMulti: boolean;
}

export interface SelectPanelSetupState {
  // 选择人员选项卡列表
  tabs: ComputedRef<BaseSelectUserTab[]>;
  // 当前选项卡类型
  currentTabType: ComputedRef<string>;
}

export enum SelectPanelEmitEventNameEnum {
  Input = 'input'
}

export type SelectPanelInstance = ComponentInstance & SelectPanelSetupState
export type SelectPanelVM = ComponentRenderProxy<SelectPanelProps> & CommonComponentInstance & SelectPanelInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserSelectPanel,
  emits: [
    SelectPanelEmitEventNameEnum.Input
  ],
  props: {
    // 是否为多选状态
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup(props: SelectPanelProps, { emit }) {
    
    const { tabs, currentTabType } = useBaseSelectUserTabs()
    
    return {
      tabs,
      currentTabType
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserSelectPanel}>
        <BaseSelectUserOperateBar 
          is-multi={this.isMulti} 
          tabs={this.tabs} 
          tabValue={this.currentTabType} 
        />
      </div>
    )
  }
})
